<template>
  <div class="register">
    <el-container>
      <!-- 导航栏 -->
      <el-header>
        <el-row>
          <el-col :span="18">
            <el-menu mode="horizontal" background-color="#545c64" text-color="#fff">
              <el-menu-item></el-menu-item>
              <el-menu-item>
              </el-menu-item>
              <el-menu-item index="1">
                <!-- <img class="pic" src="../assets/logo.png" /> -->
              </el-menu-item>
              <el-menu-item index="2">
                <!-- <img class="logo" src="../assets/lib_logo.png" /> -->
              </el-menu-item>
              <el-menu-item disabled><span> | </span></el-menu-item>
              <el-menu-item index="3">SIGN UP</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6">
            <el-menu mode="horizontal" background-color="#545c64" text-color="#fff">
              <el-menu-item index="1" @click="goLogIn">Log in</el-menu-item>
              <el-menu-item ><span> | </span></el-menu-item>
              <el-menu-item index="2">
                Sign up
              </el-menu-item>
              <el-menu-item index="3">
                <!-- <img class="pic" src="../assets/logo.png" /> -->
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <!-- 主体区 -->
      <el-main>
        <div class="register_box">
          <el-row>
            <el-col :span="12">
              <div class="register_form">
                <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" label-width="100px">
                  <!-- 用户名 -->
                 <!-- <el-form-item label="Email:" prop="Email">
                    <el-input v-model="registerForm.Email" prefix-icon="el-icon-message"></el-input>
                  </el-form-item> -->
                  <!-- 密码 -->
                  <el-form-item label="Username:" prop="userName">
                    <el-input v-model="registerForm.userName" prefix-icon="el-icon-user-solid"></el-input>
                  </el-form-item>
                  <el-form-item label="Password:" prop="password">
                    <el-input v-model="registerForm.password" type="password" prefix-icon="iconfont icon-3702mima"></el-input>
                  </el-form-item>
                  <el-form-item label="rePassword:" prop="password">
                    <el-input v-model="registerForm.password" type="password" prefix-icon="iconfont icon-3702mima"></el-input>
                  </el-form-item>
                  <div>
                    <el-button type="primary" size="medium" @click="signUp">Sign up</el-button>
                  </div>
                </el-form>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="message_box">
                <div class="message_logo">
                  <!-- <img src="../assets/lib_logo.png" /> -->
                </div>
                <div class="message_info">
                  <ul>
                    <li>Please note that fill in the username and email address
                      as the credentials for account recovery
                    </li>
                    <li>
                      Contents marked with * in the regiestration form page
                      are required
                    </li>
                  </ul>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <!-- 底部 -->
      <el-footer>
        @2020 XDedu
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data() {
      // 自定义校验规则
      var checkEmail = (rule, value, callback) => {
        // 验证邮箱的正则
        const regEmail = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
        if (regEmail.test(value)) {
          // 合法
          return callback()
        }
        // 非法
        callback(new Error('请输入合法的邮箱'))
      }

      return {
        // 注册表单对象
        registerForm: {
          Email: '',
          userName: '',
          password: ''

        },
        // 验证表单对象
        registerRules: {
          // 验证邮箱
          Email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
          ],
          // 验证用户名
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
        },
      }
    },
    created() {

    },
    methods: {
      // 跳转至登录页面
      goLogIn(){
        this.$router.push("/login");
      },
      // 注册
      signUp(){
        this.$refs.registerFormRef.validate(async valid => {
          if (!valid) return;
          // 发起登录请求
          this.$http({
            url:'librarian/register',
            method:'POST',
            data:qs.stringify({
              bookManagerName:this.registerForm.userName,
              bookManagerPassword:this.registerForm.password
            })
          }).then(res=>{
            this.$message.success('注册成功')
            // window.sessionStorage.setItem("token",'123456')
            // this.$router.push("/home");
          }).catch(err=>{
            console.log(err.message)
            this.$message.error('注册失败')
          })

        })
      },
    }
  }
</script>

<style lang="less" scoped>
  /*******main end*********/
  //  注册整体框架 = 表单 + (图片 + 说明)
  .register_box{
    width: 900px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
  }
  // 左边表单部分
  .register_form{
    width: 400px;
    height: 320px;
    position: absolute;
    border-top: solid 40px #545c64;
    border-bottom: solid 40px #545c64;
    border-left: 1px solid #545c64;
    border-right: 1px solid #545c64;
    border-radius: 10px;
    top: 20%;
    .el-form{
      padding: 20px;
    }
    .el-button {
      width: 200px;
      position: absolute;
      left: 30%;
    }
  }
  // 右边信息
  .message_box{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    padding-left: 40px;
    // 上方图标
    .message_logo {
      position: absolute;
      padding: ;
      left: 50%;
      transform: translate(-50%);
    }
    // 下方信息
    .message_info{
      position: absolute;
      top: 40%;
      li{
        font-size: 18px;
        padding: 20px;
        line-height: 20px;
      }
    }
  }
  /*******main start*******/
</style>
